<template>
  <div>
    <h1 class="register_label">注册用户</h1>
    <div class="register">
      <div class="leftBackground" :style="'height:'+height+'px'">
        <span class="img"></span>
      </div>
      <el-row class="register_box">
        <el-col :span="19">
          <div class="grid-content left">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="用户名：" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入用户名" @blur="checkExist"></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="gender">
                <el-radio-group v-model="form.gender">
                  <el-radio label="Y">男</el-radio>
                  <el-radio label="N">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="别名：" prop="anotherName">
                <el-input v-model="form.anotherName" placeholder="(选填)"></el-input>
              </el-form-item>
              <el-form-item label="电话：" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
              </el-form-item>
              <el-form-item label="QQ：" prop="qq">
                <el-input v-model="form.qq" placeholder="请输入QQ账号"></el-input>
              </el-form-item>
              <el-form-item label="邮箱：" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item class="btn">
                <el-button type="primary" @click="onSubmit('form')">注册</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content img" :style="'height:'+height+'px'">
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { register,checkExistUser } from "@/js/api/home";
export default {
  name: "register",
  data() {
    return {
      form: {
        password:"",
        gender:"Y",
        anotherName:"",
        email:"",
        phone:"",
        qq:"",
      },
      nameExist:false,
      height:0,
      rules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, trigger: 'blur', validator: (rule, value, callback)=>{this.utils.validator.checkPhone(rule, value, callback)} },],
        qq: [{ required: true, trigger: 'blur', validator: (rule, value, callback)=>{this.utils.validator.checkQQ(rule, value, callback)} },],
        email: [{ required: true, trigger: 'blur', validator: (rule, value, callback)=>{this.utils.validator.checkEmail(rule, value, callback)} },]
      }
    }
  },
  computed:{
  },
  mounted(){
    this.height = this.$refs.form.$el.offsetHeight+40
  },
  methods: {
    checkExist(val){
      if(val.target.value!=""){
        checkExistUser({username:(val.target.value).toLowerCase()}).then(response=>{
          if(!response.data){
            this.nameExist = false
            this.utils.tips.error("用户名已存在")
          }else this.nameExist = true
        })
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.register_time = this.utils.time.dateFormat(new Date())
          if(this.nameExist){
            register(this.form).then(response=>{
              if(response.data.state){
                this.utils.tips.success(response.data.msg +" 2秒后跳转到登录页面")
                setTimeout(() => {
                  this.$router.push({path: "/login"})
                }, 2000);
              }else{
                this.utils.tips.error(response.data.msg)
              }
            })
          }else this.utils.tips.error("用户名已存在")
        }
      });
    },
  },
};
</script>

<style lang="less">
.register_label{
  text-align: center;
  color: #b94a48;
  margin: 0;
  margin-top: 20px;
}
.register {
  position:relative;
  margin-top: 10px;
  margin-right: 0px;
  .leftBackground{
    left: -155px;
    top: 20px;
    position: absolute;
    width: 400px;
    .img{
      width: 100%;
      height: 100%;
      display: inline-block;
      background: linear-gradient(rgba(252, 252, 252, 0.99), rgba(252, 252, 252, 0.90)),url("~@/assets/img/background/two.jpeg") no-repeat center center;
      background-size:100% 100%;
    }
  }
  .register_box{
    padding: 20px 40px 20px 180px;
    .left{
      background-color: white;
      margin-right: 20px;
      padding: 10px 20px;
      border-radius: 0px;
      border: 1px solid #DCDFE6;
      box-shadow: 2px 2px 11px #c6c7c8;
      .el-form{
        width: 80%;
        padding: 30px 10px 0 70px;
      }
      .btn{
        text-align: center;
      }
    }
    .img{
      border-radius: 0px;
      height: 100%;
      background: url("~@/assets/img/background/one.jpeg") no-repeat center center;
      background-size:100% 100%;
    }
  }
}
</style>